﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>EMG_Game</title>
    <meta charset="utf-8">
    <meta name="author" content="Brainseek">
    <style>
        @font-face {
            font-family: 'numjump';
            src: url('source/num.ttf');
        }
        
        body,
        html {
            margin: 0;
        }
        
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            color: #ffffff;
            padding: 6px;
            font-size: 13px;
            text-align: center;
            font-family: Microsoft YaHei
        }
        
        #canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        #point {
            position: absolute;
            left: 120px;
            top: 80px;
            color: #464545;
            font-size: 50px;
            font-family: numjump;
        }
        
        #gameBegin {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 600px;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 9;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        #gameOver {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 600px;
            background-color: rgba(0, 0, 0, 0.6);
            display: none;
            z-index: 9;
            color: white;
            text-align: center;
        }
    </style>
</head>

<script src="build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/Stats.js"></script>
<script src="js/tween.min.js"></script>
<script src="jquery/jquery-3.3.1.js"></script>
<script src="js/echart.js"></script>
<!-- <script src="js/controls/OrbitControls.js"></script> -->
<script>
    var date = new Date()
    var gameDuration = 0
    var endTime = 0
    var startTime = date.getTime()
    var audio = document.createElement("audio")
    var startAudio = document.createElement("audio")
    var gameoverAudio = document.createElement("audio")
    var downAudio = document.createElement("audio")
    downAudio.src = "./source/combo5.mp3"
    gameoverAudio.src = "./source/fall.mp3";
    startAudio.src = "./source/start.mp3";
    audio.src = "./source/scale_intro.mp3";
    startAudio.play()
    var ws
    setTimeout(() => {
        initWs()
    }, 1000)


    function initWs() {
        ws = new WebSocket("ws://127.0.0.1:5678");
        var flag = true
        ws.addEventListener("open", () => {
            console.log("WebSocket连接成功");
        })
        ws.addEventListener("error", function(event) {
            console.error("WebSocket 出错");
        });
        ws.addEventListener('message', (event) => {

            if (event.data == "ready" && flag) {
                mousedownfn()
                flag = false
            } else
            if (event.data == "jump" && !flag) {
                mouseupfn()
                flag = true
            } else if (event.data != "ready" && event.data != "jump") {

                var json = JSON.parse(event.data)
                json.signal.forEach((e, i) => {
                    addData(e)

                })
            }
        })
    }

    function mousedownfn() {
        // console.log(buildDistance);
        audio.play()

        beStronger();
        bulingBulingDown();
        var now = new Date();
        downTime = now.getTime();

    }

    function mouseupfn() {
        audio.pause()
        audio.currentTime = 0;
        downtween.stop();
        var now2 = new Date();
        upTime = now2.getTime();
        jumpDistance = Math.ceil((upTime - downTime) / 50) == 1 ? 20 : 100 + Math.round((upTime - downTime) / 50) * 2;
        // console.log(jumpDistance);
        jump(jumpDistance);
    }
    document.oncontextmenu = function(e) {
        //或者return false;
        e.preventDefault();
    };

    if (WEBGL.isWebGLAvailable() === false) {
        document.body.appendChild(WEBGL.getWebGLErrorMessage());
    }

    // var camera,  scene, controls, renderer;
    var camera, scene, renderer;
    var stats;

    function threeStart() {
        init();
        animate();
    }

    var player;
    var point = 0;
    var direction = 1; //1right 0left
    var playerPosition;
    var jumpDistance, buildDistance;
    var downtween;
    var mainmesh1, mainmesh2, mainmesh3, mainmesh4, mainmesh5;
    var mainmeshPosition1, mainmeshPosition2, mainmeshPosition3, mainmeshPosition4, mainmeshPosition5;

    function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x8797a4);

        width = document.getElementById('canvas-frame').clientWidth;
        height = document.getElementById('canvas-frame').clientHeight;

        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        // renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize(width, height);
        renderer.shadowMap.enabled = true;
        document.getElementById('canvas-frame').appendChild(renderer.domElement);

<!--        stats = new Stats();-->
<!--        stats.domElement.style.position = 'absolute';-->
<!--        stats.domElement.style.right = '8px';-->
<!--        stats.domElement.style.top = '8px';-->
<!--        stats.domElement.style.width = '90px';-->
<!--        document.getElementById('canvas-frame').appendChild(stats.domElement);-->

        camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, -1000, 2000);
        camera.position.set(200, 165, 150);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        // controls = new THREE.OrbitControls( camera, renderer.domElement );
        // //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
        // controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        // controls.dampingFactor = 0.25;
        // controls.screenSpacePanning = false;
        // controls.minDistance = 100;
        // controls.maxDistance = 500;
        // controls.maxPolarAngle = Math.PI / 2;

        light = new THREE.AmbientLight(0xFFFFFF, 0.7);
        scene.add(light);
        // light3 = new THREE.DirectionalLight( 0xFFFFFF,0.2);
        // // light2.position.set(0,400,0);
        // scene.add( light3 );

        light2 = new THREE.DirectionalLight(0xFFFFFF, 0.4);
        light2.castShadow = true; //开启灯光投射阴影
        light2.position.set(300, 400, 0);
        // light2.onlyShadow = true;
        light2.shadowDarkness = 0.6;
        light2.shadow.mapSize.width = 2000; // default 512
        light2.shadow.mapSize.height = 2000; // default 512
        light2.shadow.camera.near = 300; // default 0.5
        light2.shadow.camera.far = 700; // default 500
        light2.shadow.camera.left = -500;
        light2.shadow.camera.right = 500;
        light2.shadow.camera.top = 500;
        light2.shadow.camera.bottom = -500;
        // var helper = new THREE.CameraHelper( light2.shadow.camera );
        // scene.add( helper );

        var ground = creatGround(0, 0, 0x8797a4);
        var boxNum = Math.floor(Math.random() * 9); //0~boxCount-1
        switch (boxNum) {
            case 0:
                mainmesh4 = creatcube10(0, 0);
                break;
            case 1:
                mainmesh4 = creatcube11(0, 0);
                break;
            case 2:
                mainmesh4 = creatcube12(0, 0);
                break;
            case 3:
                mainmesh4 = creatcube13(0, 0);
                break;
            case 4:
                mainmesh4 = creatcube14(0, 0);
                break;
            case 5:
                mainmesh4 = creatcube15(0, 0);
                break;
            case 6:
                mainmesh4 = creatcube16(0, 0);
                break;
            case 7:
                mainmesh4 = creatcube17(0, 0);
                break;
            case 8:
                mainmesh4 = creatcube18(0, 0);
                break;
        }
        mainmeshPosition4 = new THREE.Vector3(0, 0, 0);
        buildDistance = 200;
        var boxNum = Math.floor(Math.random() * 9); //0~boxCount-1
        switch (boxNum) {
            case 0:
                mainmesh5 = creatcube10(0, -buildDistance);
                break;
            case 1:
                mainmesh5 = creatcube11(0, -buildDistance);
                break;
            case 2:
                mainmesh5 = creatcube12(0, -buildDistance);
                break;
            case 3:
                mainmesh5 = creatcube13(0, -buildDistance);
                break;
            case 4:
                mainmesh5 = creatcube14(0, -buildDistance);
                break;
            case 5:
                mainmesh5 = creatcube15(0, -buildDistance);
                break;
            case 6:
                mainmesh5 = creatcube16(0, -buildDistance);
                break;
            case 7:
                mainmesh5 = creatcube17(0, -buildDistance);
                break;
            case 8:
                mainmesh5 = creatcube18(0, -buildDistance);
                break;
        }
        mainmeshPosition5 = new THREE.Vector3(0, 0, 0);
        player = creatcubeplayer(0, -50, 0);
        player.position.set(0, 200, 0);
        playerPosition = new THREE.Vector3(0, 0, 0);
        // var playerHelper = new THREE.BoxHelper( player );
        // scene.add( playerHelper );
        scene.add(player);
        // console.log(player);
        // light2.target = player.children[1];
        scene.add(light2);


        var Option = {
            py: player.position.y
        };
        new TWEEN.Tween(Option)
            .to({
                py: 50,
            }, 500)
            .onUpdate(function() {
                player.position.y = this.py;
            })
            .onComplete(function() {

                var flag = IsPC();
                // console.log(flag)//true为PC端，false为手机端和ipad

                if (flag == true) {
                    var downTime = 0;
                    document.getElementById("canvas-frame").addEventListener("mousedown", mousedownfn);


                    document.getElementById("canvas-frame").addEventListener("mouseup", mouseupfn);
                } else {
                    document.getElementById("canvas-frame").addEventListener("touchstart", function() {
                        // console.log(buildDistance);
                        beStronger();
                        bulingBulingDown();
                        var now = new Date();
                        downTime = now.getTime();
                    });
                    document.getElementById("canvas-frame").addEventListener("touchend", function() {
                        downtween.stop();
                        var now2 = new Date();
                        upTime = now2.getTime();
                        jumpDistance = Math.ceil((upTime - downTime) / 100) == 1 ? 20 : 100 + Math.round((upTime - downTime) / 100) * 20;
                        // console.log(jumpDistance);
                        jump(jumpDistance);
                    });
                }

            })
            .easing(TWEEN.Easing.Bounce.Out)
            .delay(500)
            .start();

        window.addEventListener('resize', onWindowResize, false);
    }

    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"
        ];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    function beStronger() {
        Option = {
            py: player.children[0].position.y,
            sy: player.children[1].scale.y,
            sx: player.children[1].scale.x,
            sz: player.children[1].scale.z,
        };
        downtween = new TWEEN.Tween(Option)
            .to({
                py: 36,
                sy: 0.5,
                sx: 1.5,
                sz: 1.5,
            }, 1050)
            .onUpdate(function() {
                player.children[0].position.y = this.py;
                player.children[1].scale.y = this.sy;
                player.children[1].scale.x = this.sx;
                player.children[1].scale.z = this.sz;
            })
            .interpolation(TWEEN.Interpolation.Bezier)
            .start();
    }

    function jump(playerMoveLen) {
        console.log(jumpDistance, buildDistance, playerPosition, player.position);
        if (direction == 1) {
            Option = {
                hpy: player.children[0].position.y,
                hsy: player.children[1].scale.y,
                hsx: player.children[1].scale.x,
                hsz: player.children[1].scale.z
            };
            jumpr1 = new TWEEN.Tween(Option)
                .to({
                    hpy: 56,
                    hsy: 1,
                    hsx: 1,
                    hsz: 1,
                }, 50)
                .onUpdate(function() {
                    player.children[0].position.y = this.hpy;
                    player.children[1].scale.y = this.hsy;
                    player.children[1].scale.x = this.hsx;
                    player.children[1].scale.z = this.hsz;
                })

            Option = {
                px: playerPosition.x,
                py: 0,
                pz: playerPosition.z
            };
            jumpr2 = new TWEEN.Tween(Option)
                .to({
                    px: [playerPosition.x * 0.5, 0],
                    py: [150, 0],
                    pz: [playerPosition.z - playerMoveLen * 0.5, playerPosition.z - playerMoveLen],
                    // rz: [Math.PI, 0],
                }, 400)
                .onUpdate(function() {
                    player.position.x = this.px;
                    player.position.y = this.py + 50;
                    player.position.z = this.pz;
                })
                .onComplete(function() {
                    playerPosition.x = 0;
                    playerPosition.z = playerPosition.z - playerMoveLen;
                    if (-playerPosition.z - buildDistance <= 50 && -playerPosition.z - buildDistance >= -50) {
                        // 下个盒子上
                        downAudio.play()
                        pointGet();
                        changeCamera();
                        bulingBulingUp();

                        //console.log("下个盒子上");

                    } else if (-playerPosition.z <= 50) {
                        //本盒子上
                        downAudio.play()
                        bulingBulingUp();
                        //console.log("本盒子上");

                    } else if (-playerPosition.z > 50 && -playerPosition.z < 62) {
                        //本盒子边上掉落
                        gameOver(11);
                        // console.log("本盒子边上掉落");
                    } else if (-playerPosition.z - buildDistance < 62 && -playerPosition.z - buildDistance > 50) {
                        //下个盒子远边上掉落
                        gameOver(22);
                        // console.log("下个盒子远边上掉落");
                    } else if (-playerPosition.z - buildDistance > -38 && -playerPosition.z - buildDistance < -50) {
                        //下个盒子近边上掉落
                        gameOver(21);
                        // console.log("下个盒子近边上掉落");
                    } else {
                        //竖直下落
                        gameOver(0);
                        // console.log("竖直下落");
                    }
                    console.log(playerPosition, player.position);

                })
                .interpolation(TWEEN.Interpolation.Bezier)
            jumpr1.chain(jumpr2);
            jumpr1.start();
        } else {
            Option = {
                hpy: player.children[0].position.y,
                hsy: player.children[1].scale.y,
                hsx: player.children[1].scale.x,
                hsz: player.children[1].scale.z
            };
            jumpr1 = new TWEEN.Tween(Option)
                .to({
                    hpy: 56,
                    hsy: 1,
                    hsx: 1,
                    hsz: 1,
                }, 50)
                .onUpdate(function() {
                    player.children[0].position.y = this.hpy;
                    player.children[1].scale.y = this.hsy;
                    player.children[1].scale.x = this.hsx;
                    player.children[1].scale.z = this.hsz;
                })

            Option = {
                py: 0,
                px: playerPosition.x,
                pz: playerPosition.z
            };
            jumpr2 = new TWEEN.Tween(Option)
                .to({
                    py: [150, 0],
                    px: [playerPosition.x - playerMoveLen * 0.5, playerPosition.x - playerMoveLen],
                    pz: [playerPosition.z * 0.5, 0],
                    // rz: [Math.PI, 0],
                }, 400)
                .onUpdate(function() {
                    player.position.y = this.py + 50;
                    player.position.x = this.px;
                    player.position.z = this.pz;

                })
                .onComplete(function() {
                    playerPosition.z = 0;
                    playerPosition.x = playerPosition.x - playerMoveLen;
                    if (-playerPosition.x - buildDistance <= 50 && -playerPosition.x - buildDistance >= -50) {
                        // 下个盒子上
                        downAudio.play()
                        pointGet();
                        changeCamera();
                        bulingBulingUp();
                        // console.log("下个盒子上1");

                    } else if (-playerPosition.x <= 50) {
                        //本盒子上
                        downAudio.play()
                        bulingBulingUp();
                        // console.log("本盒子上");

                    } else if (-playerPosition.x > 50 && -playerPosition.x < 62) {
                        //本盒子边上掉落
                        gameOver(11);
                        // console.log("本盒子边上掉落");
                    } else if (-playerPosition.x - buildDistance < 62 && -playerPosition.x - buildDistance > 50) {
                        //下个盒子远边上掉落
                        gameOver(22);
                        // console.log("下个盒子远边上掉落");
                    } else if (-playerPosition.x - buildDistance > -38 && -playerPosition.x - buildDistance < -50) {
                        //下个盒子近边上掉落
                        gameOver(21);
                        // console.log("下个盒子近边上掉落");
                    } else {
                        //竖直下落
                        gameOver(0);
                        // console.log("竖直下落");
                    }

                })
                .interpolation(TWEEN.Interpolation.Bezier)
            jumpr1.chain(jumpr2);
            jumpr1.start();
        }

    }

    function bulingBulingDown() {}

    function bulingBulingUp() {}

    function changeCamera() {
        var directionFlog = direction;
        if (directionFlog == 1) {
            playerPosition.z = player.position.z;
            if (mainmesh1 && mainmesh2 && mainmesh3 && mainmesh4 && mainmesh5) {
                // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    pz: playerPosition.z,
                    ps1: mainmeshPosition1.z,
                    ps2: mainmeshPosition2.z,
                    ps3: mainmeshPosition3.z,
                    ps4: mainmeshPosition4.z,
                    ps5: mainmeshPosition5.z
                };
                new TWEEN.Tween(Option)
                    .to({
                        pz: playerPosition.z + buildDistance,
                        ps1: mainmeshPosition1.z + buildDistance,
                        ps2: mainmeshPosition2.z + buildDistance,
                        ps3: mainmeshPosition3.z + buildDistance,
                        ps4: mainmeshPosition4.z + buildDistance,
                        ps5: mainmeshPosition5.z + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh1.position.z = this.ps1;
                        mainmesh2.position.z = this.ps2;
                        mainmesh3.position.z = this.ps3;
                        mainmesh4.position.z = this.ps4;
                        mainmesh5.position.z = this.ps5;
                        player.position.z = this.pz;
                    })
                    .onComplete(function() {
                        playerPosition.z += buildDistance;
                        mainmeshPosition1.z = mainmeshPosition2.z + buildDistance;
                        mainmeshPosition1.x = mainmeshPosition2.x;
                        mainmeshPosition2.z = mainmeshPosition3.z + buildDistance;
                        mainmeshPosition2.x = mainmeshPosition3.x;
                        mainmeshPosition3.z = mainmeshPosition4.z + buildDistance;
                        mainmeshPosition3.x = mainmeshPosition4.x;
                        mainmeshPosition4.z = mainmeshPosition5.z + buildDistance;
                        mainmeshPosition4.x = mainmeshPosition5.x;
                        deleteGroup(mainmesh1);
                        mainmesh1 = mainmesh2;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            } else if (!mainmesh3) {
                // console.log(mainmeshPosition4,mainmeshPosition5);
                Option = {
                    pz: playerPosition.z,
                    ps4: mainmeshPosition4.z,
                    ps5: mainmeshPosition5.z
                };
                new TWEEN.Tween(Option)
                    .to({
                        pz: playerPosition.z + buildDistance,
                        ps4: mainmeshPosition4.z + buildDistance,
                        ps5: mainmeshPosition5.z + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh4.position.z = this.ps4;
                        mainmesh5.position.z = this.ps5;
                        player.position.z = this.pz;
                    })
                    .onComplete(function() {
                        playerPosition.z += buildDistance;
                        mainmeshPosition3 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition3.z = mainmeshPosition4.z + buildDistance;
                        mainmeshPosition3.x = mainmeshPosition4.x;
                        mainmeshPosition4.z = mainmeshPosition5.z + buildDistance;
                        mainmeshPosition4.x = mainmeshPosition5.x;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();

            } else if (!mainmesh2) {
                // console.log(mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    pz: playerPosition.z,
                    ps3: mainmeshPosition3.z,
                    ps4: mainmeshPosition4.z,
                    ps5: mainmeshPosition5.z
                };
                new TWEEN.Tween(Option)
                    .to({
                        pz: playerPosition.z + buildDistance,
                        ps3: mainmeshPosition3.z + buildDistance,
                        ps4: mainmeshPosition4.z + buildDistance,
                        ps5: mainmeshPosition5.z + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh3.position.z = this.ps3;
                        mainmesh4.position.z = this.ps4;
                        mainmesh5.position.z = this.ps5;
                        player.position.z = this.pz;
                    })
                    .onComplete(function() {
                        playerPosition.z += buildDistance;
                        mainmeshPosition2 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition2.z = mainmeshPosition3.z + buildDistance;
                        mainmeshPosition2.x = mainmeshPosition3.x;
                        mainmeshPosition3.z = mainmeshPosition4.z + buildDistance;
                        mainmeshPosition3.x = mainmeshPosition4.x;
                        mainmeshPosition4.z = mainmeshPosition5.z + buildDistance;
                        mainmeshPosition4.x = mainmeshPosition5.x;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            } else {
                // console.log(mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    pz: playerPosition.z,
                    ps2: mainmeshPosition2.z,
                    ps3: mainmeshPosition3.z,
                    ps4: mainmeshPosition4.z,
                    ps5: mainmeshPosition5.z
                };
                new TWEEN.Tween(Option)
                    .to({
                        pz: playerPosition.z + buildDistance,
                        ps2: mainmeshPosition2.z + buildDistance,
                        ps3: mainmeshPosition3.z + buildDistance,
                        ps4: mainmeshPosition4.z + buildDistance,
                        ps5: mainmeshPosition5.z + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh2.position.z = this.ps2;
                        mainmesh3.position.z = this.ps3;
                        mainmesh4.position.z = this.ps4;
                        mainmesh5.position.z = this.ps5;
                        player.position.z = this.pz;
                    })
                    .onComplete(function() {
                        playerPosition.z += buildDistance;
                        mainmeshPosition1 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition1.z = mainmeshPosition2.z + buildDistance;
                        mainmeshPosition1.x = mainmeshPosition2.x;
                        mainmeshPosition2.z = mainmeshPosition3.z + buildDistance;
                        mainmeshPosition2.x = mainmeshPosition3.x;
                        mainmeshPosition3.z = mainmeshPosition4.z + buildDistance;
                        mainmeshPosition3.x = mainmeshPosition4.x;
                        mainmeshPosition4.z = mainmeshPosition5.z + buildDistance;
                        mainmeshPosition4.x = mainmeshPosition5.x;
                        mainmesh1 = mainmesh2;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            }
        } else {
            playerPosition.x = player.position.x;
            if (mainmesh1 && mainmesh2 && mainmesh3 && mainmesh4 && mainmesh5) {
                // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    px: playerPosition.x,
                    ps1: mainmeshPosition1.x,
                    ps2: mainmeshPosition2.x,
                    ps3: mainmeshPosition3.x,
                    ps4: mainmeshPosition4.x,
                    ps5: mainmeshPosition5.x
                };
                new TWEEN.Tween(Option)
                    .to({
                        px: playerPosition.x + buildDistance,
                        ps1: mainmeshPosition1.x + buildDistance,
                        ps2: mainmeshPosition2.x + buildDistance,
                        ps3: mainmeshPosition3.x + buildDistance,
                        ps4: mainmeshPosition4.x + buildDistance,
                        ps5: mainmeshPosition5.x + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh1.position.x = this.ps1;
                        mainmesh2.position.x = this.ps2;
                        mainmesh3.position.x = this.ps3;
                        mainmesh4.position.x = this.ps4;
                        mainmesh5.position.x = this.ps5;
                        player.position.x = this.px;
                    })
                    .onComplete(function() {
                        playerPosition.x += buildDistance;
                        mainmeshPosition1.x = mainmeshPosition2.x + buildDistance;
                        mainmeshPosition1.z = mainmeshPosition2.z;
                        mainmeshPosition2.x = mainmeshPosition3.x + buildDistance;
                        mainmeshPosition2.z = mainmeshPosition3.z;
                        mainmeshPosition3.x = mainmeshPosition4.x + buildDistance;
                        mainmeshPosition3.z = mainmeshPosition4.z;
                        mainmeshPosition4.x = mainmeshPosition5.x + buildDistance;
                        mainmeshPosition4.z = mainmeshPosition5.z;
                        deleteGroup(mainmesh1);
                        mainmesh1 = mainmesh2;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            } else if (!mainmesh3) {
                // console.log(mainmeshPosition4,mainmeshPosition5);
                Option = {
                    px: playerPosition.x,
                    ps4: mainmeshPosition4.x,
                    ps5: mainmeshPosition5.x
                };
                new TWEEN.Tween(Option)
                    .to({
                        px: playerPosition.x + buildDistance,
                        ps4: mainmeshPosition4.x + buildDistance,
                        ps5: mainmeshPosition5.x + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh4.position.x = this.ps4;
                        mainmesh5.position.x = this.ps5;
                        player.position.x = this.px;
                    })
                    .onComplete(function() {
                        playerPosition.x += buildDistance;
                        mainmeshPosition3 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition3.x = mainmeshPosition4.x + buildDistance;
                        mainmeshPosition3.z = mainmeshPosition4.z;
                        mainmeshPosition4.x = mainmeshPosition5.x + buildDistance;
                        mainmeshPosition4.z = mainmeshPosition5.z;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();

            } else if (!mainmesh2) {
                // console.log(mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    px: playerPosition.x,
                    ps3: mainmeshPosition3.x,
                    ps4: mainmeshPosition4.x,
                    ps5: mainmeshPosition5.x
                };
                new TWEEN.Tween(Option)
                    .to({
                        px: playerPosition.x + buildDistance,
                        ps3: mainmeshPosition3.x + buildDistance,
                        ps4: mainmeshPosition4.x + buildDistance,
                        ps5: mainmeshPosition5.x + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh3.position.x = this.ps3;
                        mainmesh4.position.x = this.ps4;
                        mainmesh5.position.x = this.ps5;
                        player.position.x = this.px;
                    })
                    .onComplete(function() {
                        playerPosition.x += buildDistance;
                        mainmeshPosition2 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition2.x = mainmeshPosition3.x + buildDistance;
                        mainmeshPosition2.z = mainmeshPosition3.z;
                        mainmeshPosition3.x = mainmeshPosition4.x + buildDistance;
                        mainmeshPosition3.z = mainmeshPosition4.z;
                        mainmeshPosition4.x = mainmeshPosition5.x + buildDistance;
                        mainmeshPosition4.z = mainmeshPosition5.z;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            } else {
                // console.log(mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                Option = {
                    px: playerPosition.x,
                    ps2: mainmeshPosition2.x,
                    ps3: mainmeshPosition3.x,
                    ps4: mainmeshPosition4.x,
                    ps5: mainmeshPosition5.x
                };
                new TWEEN.Tween(Option)
                    .to({
                        px: playerPosition.x + buildDistance,
                        ps2: mainmeshPosition2.x + buildDistance,
                        ps3: mainmeshPosition3.x + buildDistance,
                        ps4: mainmeshPosition4.x + buildDistance,
                        ps5: mainmeshPosition5.x + buildDistance,
                    }, 400)
                    .onUpdate(function() {
                        mainmesh2.position.x = this.ps2;
                        mainmesh3.position.x = this.ps3;
                        mainmesh4.position.x = this.ps4;
                        mainmesh5.position.x = this.ps5;
                        player.position.x = this.px;
                    })
                    .onComplete(function() {
                        playerPosition.x += buildDistance;
                        mainmeshPosition1 = new THREE.Vector3(0, 0, 0);
                        mainmeshPosition1.x = mainmeshPosition2.x + buildDistance;
                        mainmeshPosition1.z = mainmeshPosition2.z;
                        mainmeshPosition2.x = mainmeshPosition3.x + buildDistance;
                        mainmeshPosition2.z = mainmeshPosition3.z;
                        mainmeshPosition3.x = mainmeshPosition4.x + buildDistance;
                        mainmeshPosition3.z = mainmeshPosition4.z;
                        mainmeshPosition4.x = mainmeshPosition5.x + buildDistance;
                        mainmeshPosition4.z = mainmeshPosition5.z;
                        mainmesh1 = mainmesh2;
                        mainmesh2 = mainmesh3;
                        mainmesh3 = mainmesh4;
                        mainmesh4 = mainmesh5;
                        createBox();
                        // console.log(mainmeshPosition1,mainmeshPosition2,mainmeshPosition3,mainmeshPosition4,mainmeshPosition5);
                    })
                    .start();
            }
        }
    }

    function createBox() {
        var boxCount = 28;
        var boxNum = Math.floor(Math.random() * boxCount); //0~boxCount-1
        direction = Math.floor(Math.random() * 2); //0~boxCount-1
        buildDistance = 100 + (1 + Math.floor(Math.random() * 7)) * 20; //140~380
        if (direction == 1) {
            switch (boxNum) {
                case 0:
                    mainmesh5 = creatcube10(0, -buildDistance);
                    break;
                case 1:
                    mainmesh5 = creatcube11(0, -buildDistance);
                    break;
                case 2:
                    mainmesh5 = creatcube12(0, -buildDistance);
                    break;
                case 3:
                    mainmesh5 = creatcube13(0, -buildDistance);
                    break;
                case 4:
                    mainmesh5 = creatcube14(0, -buildDistance);
                    break;
                case 5:
                    mainmesh5 = creatcube15(0, -buildDistance);
                    break;
                case 6:
                    mainmesh5 = creatcube16(0, -buildDistance);
                    break;
                case 7:
                    mainmesh5 = creatcube17(0, -buildDistance);
                    break;
                case 8:
                    mainmesh5 = creatcube18(0, -buildDistance);
                    break;
                case 9:
                    mainmesh5 = creatcube21(0, -buildDistance);
                    break;
                case 10:
                    mainmesh5 = creatcube22(0, -buildDistance);
                    break;
                case 11:
                    mainmesh5 = creatcube23(0, -buildDistance);
                    break;
                case 12:
                    mainmesh5 = creatcube24(0, -buildDistance);
                    break;
                case 13:
                    mainmesh5 = creatcube25(0, -buildDistance);
                    break;
                case 14:
                    mainmesh5 = creatcube26(0, -buildDistance);
                    break;
                case 15:
                    mainmesh5 = creatcube27(0, -buildDistance);
                    break;
                case 16:
                    mainmesh5 = creatcube01(0, -buildDistance);
                    break;
                case 17:
                    mainmesh5 = creatcube02(0, -buildDistance);
                    break;
                case 18:
                    mainmesh5 = creatcube03(0, -buildDistance);
                    break;
                case 19:
                    mainmesh5 = creatcube04(0, -buildDistance);
                    break;
                case 20:
                    mainmesh5 = creatcube05(0, -buildDistance);
                    break;
                case 21:
                    mainmesh5 = creatcube06(0, -buildDistance);
                    break;
                case 22:
                    mainmesh5 = creatcube07(0, -buildDistance);
                    break;
                case 23:
                    mainmesh5 = creatdesk(0, -buildDistance);
                    break;
                case 24:
                    mainmesh5 = creatdesk2(0, -buildDistance);
                    break;
                case 25:
                    mainmesh5 = creatcylinder(0, -buildDistance);
                    break;
                case 26:
                    mainmesh5 = creatcylinder2(0, -buildDistance);
                    break;
                case 27:
                    mainmesh5 = creatcup(0, -buildDistance);
                    break;
            }
            mainmesh5.position.set(0, 100, 0);
            mainmeshPosition5.z = 0;
            new TWEEN.Tween(mainmesh5.position)
                .to({
                    y: 0,
                }, 500)
                .easing(TWEEN.Easing.Bounce.Out)
                .start();
        } else {
            switch (boxNum) {
                case 0:
                    mainmesh5 = creatcube10(-buildDistance, 0);
                    break;
                case 1:
                    mainmesh5 = creatcube11(-buildDistance, 0);
                    break;
                case 2:
                    mainmesh5 = creatcube12(-buildDistance, 0);
                    break;
                case 3:
                    mainmesh5 = creatcube13(-buildDistance, 0);
                    break;
                case 4:
                    mainmesh5 = creatcube14(-buildDistance, 0);
                    break;
                case 5:
                    mainmesh5 = creatcube15(-buildDistance, 0);
                    break;
                case 6:
                    mainmesh5 = creatcube16(-buildDistance, 0);
                    break;
                case 7:
                    mainmesh5 = creatcube17(-buildDistance, 0);
                    break;
                case 8:
                    mainmesh5 = creatcube18(-buildDistance, 0);
                    break;
                case 9:
                    mainmesh5 = creatcube21(-buildDistance, 0);
                    break;
                case 10:
                    mainmesh5 = creatcube22(-buildDistance, 0);
                    break;
                case 11:
                    mainmesh5 = creatcube23(-buildDistance, 0);
                    break;
                case 12:
                    mainmesh5 = creatcube24(-buildDistance, 0);
                    break;
                case 13:
                    mainmesh5 = creatcube25(-buildDistance, 0);
                    break;
                case 14:
                    mainmesh5 = creatcube26(-buildDistance, 0);
                    break;
                case 15:
                    mainmesh5 = creatcube27(-buildDistance, 0);
                    break;
                case 16:
                    mainmesh5 = creatcube01(-buildDistance, 0);
                    break;
                case 17:
                    mainmesh5 = creatcube02(-buildDistance, 0);
                    break;
                case 18:
                    mainmesh5 = creatcube03(-buildDistance, 0);
                    break;
                case 19:
                    mainmesh5 = creatcube04(-buildDistance, 0);
                    break;
                case 20:
                    mainmesh5 = creatcube05(-buildDistance, 0);
                    break;
                case 21:
                    mainmesh5 = creatcube06(-buildDistance, 0);
                    break;
                case 22:
                    mainmesh5 = creatcube07(-buildDistance, 0);
                    break;
                case 23:
                    mainmesh5 = creatdesk(-buildDistance, 0);
                    break;
                case 24:
                    mainmesh5 = creatdesk2(-buildDistance, 0);
                    break;
                case 25:
                    mainmesh5 = creatcylinder(-buildDistance, 0);
                    break;
                case 26:
                    mainmesh5 = creatcylinder2(-buildDistance, 0);
                    break;
                case 27:
                    mainmesh5 = creatcup(-buildDistance, 0);
                    break;
            }
            mainmesh5.position.set(0, 100, 0);
            mainmeshPosition5.x = 0;
            new TWEEN.Tween(mainmesh5.position)
                .to({
                    y: 0,
                }, 500)
                .easing(TWEEN.Easing.Bounce.Out)
                .start();
        }
    }

    function gameOver(flog) {
        gameoverAudio.play()
        switch (flog) {
            case 0:
                downTween0();
                break;
            case 11:
                downTween11();
                break;
            case 21:
                downTween21();
                break;
            case 22:
                downTween22();
                break;
            case 12:
                downTween12();
                break;
            case 23:
                downTween23();
                break;
            case 24:
                downTween24();
                break;
        }

        function downTween0() {}

        function downTween11() {}

        function downTween21() {}

        function downTween22() {}

        function downTween12() {}

        function downTween23() {}

        function downTween24() {}
        pointCount();
        endTime = new Date().getTime()
        gameDuration = (endTime - startTime) / 1000
        uploadGameScore()

    }

    function pointCount() {
        document.getElementById("gameOver").style.display = "block";
        document.getElementById("point").style.display = "none";
    }

    function pointGet() {
        if (direction == 1) {
            if (playerPosition.z - buildDistance == 0) {
                point += 2;
            } else {
                point += 1;
            }
        } else {
            if (playerPosition.x - buildDistance == 0) {
                point += 2;
            } else {
                point += 1;
            }
        }

        // console.log(point);
        document.getElementById("point").innerHTML = point;
        document.getElementById("pointtotal").innerHTML = point;
    }

    function creatcubeplayer(x, y, z) {
        var geometry = new THREE.SphereGeometry(9, 30, 30);
        var texture = new THREE.TextureLoader().load("source/head.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.castShadow = true;
        mesh.position.set(x, y + 106, z);
        mesh.castShadow = true;
        mesh.rotation.y = Math.PI / 2;

        var geometry3 = new THREE.SphereGeometry(11.5, 30, 30, 0, Math.PI * 2, 0, Math.PI / 3);
        var texture3 = new THREE.TextureLoader().load("source/head1.png");
        var material3 = new THREE.MeshLambertMaterial({
            map: texture3
        });
        mesh3 = new THREE.Mesh(geometry3, material3);
        mesh3.castShadow = true;
        mesh3.position.set(x, y + 78, z);
        mesh3.castShadow = true;
        mesh3.rotation.y = Math.PI * 7 / 10;

        var geometry1 = new THREE.CylinderGeometry(10, 9, 8, 30);
        var texture1 = new THREE.TextureLoader().load("source/top.png");
        var material1 = new THREE.MeshLambertMaterial({
            map: texture1
        });
        mesh1 = new THREE.Mesh(geometry1, material1);
        mesh1.castShadow = true;
        mesh1.position.set(x, y + 80, z);
        mesh1.castShadow = true;
        mesh1.rotation.y = -Math.PI / 4;

        var geometry2 = new THREE.CylinderGeometry(9, 12, 26, 30);
        var texture2 = new THREE.TextureLoader().load("source/bottom.png");
        var material2 = new THREE.MeshLambertMaterial({
            map: texture2
        });
        mesh2 = new THREE.Mesh(geometry2, material2);
        mesh2.castShadow = true;
        mesh2.position.set(x, y + 63, z);
        mesh2.castShadow = true;
        mesh2.rotation.y = -Math.PI / 3;

        body = new THREE.Object3D();
        body.add(mesh1, mesh2, mesh3);

        group = new THREE.Object3D();
        group.add(mesh, body);
        return group;
    }

    function creatGround(x, z, color) {
        var geometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            color: color
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.rotation.x = -Math.PI / 2;
        mesh.position.set(x, -0.01, z);
        scene.add(mesh);
        return mesh;
    }

    function creatcube10(x, z) {
        group = canvasTwoFace_5stripe(x, z, 0xffffff, "#ffffff", "#979797");
        return group;
    }

    function creatcube11(x, z) {
        group = canvasTwoFace_5stripe(x, z, 0x686868, "#686868", "#afafaf");
        return group;
    }

    function creatcube12(x, z) {
        group = canvasTwoFace_3stripe(x, z, 0x686868, "#686868", "#afafaf");
        return group;
    }

    function creatcube13(x, z) {
        group = canvasTwoFace_3stripe(x, z, 0x649569, "#649569", "#ffffff");
        return group;
    }

    function creatcube14(x, z) {
        group = canvasTwoFace_5stripe(x, z, 0x649569, "#649569", "#ffffff");
        return group;
    }

    function creatcube15(x, z) {
        group = canvasTwoFace_circle(x, z, 0x686868, "#686868", "#afafaf");
        return group;
    }

    function creatcube16(x, z) {
        group = canvasTwoFace_circle(x, z, 0xffffff, "#ffffff", "#979797");
        return group;
    }

    function creatcube17(x, z) {
        group = canvasTwoFace_circle(x, z, 0x649569, "#649569", "#ffffff");
        return group;
    }

    function creatcube18(x, z) {
        group = canvasTwoFace_3stripe(x, z, 0xffffff, "#ffffff", "#979797");
        return group;
    }

    function creatcube01(x, z) {
        var canvas = document.createElement('canvas');
        canvas.width = 100;
        canvas.height = 50;
        var ctx = canvas.getContext('2d');
        ctx.rect(0, 0, 100, 50);
        ctx.fillStyle = "#e86014";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(40, 25, 18, 0, 2 * Math.PI);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(45, 20, 6, 0, 2 * Math.PI);
        ctx.fillStyle = "#e86014";
        ctx.fill();
        ctx.beginPath();
        ctx.arc(65, 10, 6, 0, 2 * Math.PI);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        var texture = new THREE.Texture(canvas);
        group = canvasOneFace(x, z, texture, 0xe86014);
        return group;
    }

    function creatcube02(x, z) {
        group = allPicThreeFace(x, z, "source/express.png", 50)
        return group;
    }

    function creatcube03(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0xf64850
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        var geometry = new THREE.PlaneGeometry(32, 32);
        var texture = new THREE.TextureLoader().load("source/money.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.rotation.y = Math.PI / 2;
        mesh2.position.set(x + 50.01, 25, z);
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh2, mesh, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube04(x, z) {
        group = allPicThreeFace(x, z, "source/dict.png", 50)
        return group;
    }

    function creatcube05(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var texture = new THREE.TextureLoader().load("source/bag.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube06(x, z) {
        group = allPicThreeFace(x, z, "source/tit.png", 50)
        return group;
    }

    function creatcube21(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0x64a934
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        geometry = new THREE.PlaneGeometry(100, 50);
        var texture = new THREE.TextureLoader().load("source/green_face.png");
        material = new THREE.MeshLambertMaterial({
            map: texture
        });
        material.transparent = true;
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.rotation.y = Math.PI / 2;
        mesh2.position.set(x + 50.01, 25, z);

        geometry = new THREE.CubeGeometry(40, 30, 15);
        material = new THREE.MeshLambertMaterial({
            color: 0x64a934
        });
        var mesh3 = new THREE.Mesh(geometry, material);
        mesh3.receiveShadow = true;
        mesh3.position.set(x + 22, 31, z + 58);
        mesh3.rotation.x = -Math.PI / 4;
        var mesh4 = mesh3.clone();
        mesh4.position.set(x + 22, 31, z + 58 - 112);
        mesh4.rotation.x = Math.PI / 4;
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh2, mesh3, mesh4, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube22(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0xd4c836
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);

        geometry = new THREE.CylinderGeometry(20, 20, 10, 30, 3, true);
        material = new THREE.MeshLambertMaterial({
            color: 0xd4c836
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 25, z + 55);
        mesh1.rotation.x = -Math.PI / 2;
        var geometry = new THREE.PlaneGeometry(20, 20);
        var texture = new THREE.TextureLoader().load("source/emotion.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        var mesh3 = new THREE.Mesh(geometry, material);
        mesh3.receiveShadow = true;
        mesh3.position.set(x, 25, z + 55.01);

        mesh2 = mesh1.clone();
        mesh2.position.set(x + 55, 25, z);
        mesh2.rotation.z = Math.PI / 2;
        mesh4 = mesh3.clone();
        mesh4.position.set(x + 55.01, 25, z);
        mesh4.rotation.y = Math.PI / 2;
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, mesh4, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube23(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0xffffff
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        var geometry = new THREE.PlaneGeometry(100, 50, 1, 1);
        var texture = new THREE.TextureLoader().load("source/clock.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.rotation.y = Math.PI / 2;
        mesh1.position.set(x + 50.01, 25, z);

        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            str = i.toString();
            return str;
        }
        var hStr = checkTime(h);
        var hArr = hStr.split("");
        var mStr = checkTime(m);
        var mArr = mStr.split("");
        mesh2 = creatTime(hArr[0], 1, x, z);
        mesh3 = creatTime(hArr[1], 2, x, z);
        mesh4 = creatTime(mArr[0], 3, x, z);
        mesh5 = creatTime(mArr[1], 4, x, z);

        function creatTime(h, n, x, z) {
            var scr = "source/" + h + ".png";
            if (n == 1) {
                return loadImg(scr, 30, x, z);
            }
            if (n == 2) {
                return loadImg(scr, 12, x, z);
            }
            if (n == 3) {
                return loadImg(scr, -6, x, z);
            }
            if (n == 4) {
                return loadImg(scr, -24, x, z);
            }
        }

        function loadImg(scr, d, x, z) {
            var geometry = new THREE.PlaneGeometry(26, 26);
            var texture = new THREE.TextureLoader().load(scr);
            var material = new THREE.MeshLambertMaterial({
                map: texture
            });
            material.transparent = true;
            mesh6 = new THREE.Mesh(geometry, material);
            mesh6.receiveShadow = true;
            mesh6.rotation.y = Math.PI / 2;
            mesh6.position.set(x + 50.02, 25, z + d);
            return mesh6;
        }

        var geometry = new THREE.CylinderGeometry(20, 20, 10, 100, 3, true);
        var texture = new THREE.TextureLoader().load("source/stripe.png");
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(2, 2);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh7 = new THREE.Mesh(geometry, material);
        mesh7.receiveShadow = true;
        mesh7.position.set(x, 25, z + 55);
        mesh7.rotation.x = -Math.PI / 2;
        var geometry = new THREE.CircleGeometry(20, 30);
        var texture = new THREE.TextureLoader().load("source/stripe.png");
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        var mesh8 = new THREE.Mesh(geometry, material);
        mesh8.receiveShadow = true;
        mesh8.position.set(x, 25, z + 60);
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, mesh4, mesh5, mesh7, mesh8, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube24(x, z) {
        var geometry = new THREE.CylinderGeometry(40, 40, 6, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({
            color: 0x686868
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 45, z);
        var geometry = new THREE.CircleGeometry(40, 30);
        var texture = new THREE.TextureLoader().load("source/record.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        // texture.needsUpdate = true;
        var mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 46, z);
        mesh1.rotation.x = -Math.PI / 2;

        var texture = new THREE.TextureLoader().load("source/sing.png");
        var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0.34); //图片左下角
        var t2 = new THREE.Vector2(0.66, 0.34); //图片右下角
        var t3 = new THREE.Vector2(0.66, 1); //图片右上角
        var t0 = new THREE.Vector2(0, 1); //图片左上角
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.rotation.x = -Math.PI / 2;
        mesh2.position.set(x, 44, z);
        var geometry = new THREE.PlaneGeometry(100, 44, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0);
        var t2 = new THREE.Vector2(0.65, 0);
        var t3 = new THREE.Vector2(0.65, 0.333);
        var t0 = new THREE.Vector2(0, 0.333);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh3 = new THREE.Mesh(geometry, material);
        mesh3.receiveShadow = true;
        mesh3.position.set(x, 44 / 2, z + 50);
        var geometry = new THREE.PlaneGeometry(100, 44, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(1, 0.36);
        var t2 = new THREE.Vector2(1, 1);
        var t3 = new THREE.Vector2(0.666, 1);
        var t0 = new THREE.Vector2(0.666, 0.36);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh4 = new THREE.Mesh(geometry, material);
        mesh4.receiveShadow = true;
        mesh4.rotation.y = Math.PI / 2;
        mesh4.position.set(x + 50, 44 / 2, z);
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, mesh4, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube25(x, z) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0xf2f2f2
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        var geometry = new THREE.PlaneGeometry(66, 33);
        var texture = new THREE.TextureLoader().load("source/white_face.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        material.transparent = true;
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.rotation.y = Math.PI / 2;
        mesh1.position.set(x + 50.01, 20, z);

        var geometry = new THREE.CubeGeometry(40, 30, 15);
        var material = new THREE.MeshLambertMaterial({
            color: 0xf2f2f2
        });
        var mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.position.set(x + 22, 30, z + 58);
        mesh2.rotation.x = -Math.PI / 4;
        var mesh3 = mesh2.clone();
        mesh3.position.set(x + 22, 31, z + 58 - 112);
        mesh3.rotation.x = Math.PI / 4;
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube26(x, z) {
        var geometry = new THREE.CubeGeometry(100, 40, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0x9175cf
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 20, z);

        var texture = new THREE.TextureLoader().load("source/gift.png");
        var geometry = new THREE.PlaneGeometry(110, 110, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0.25); //图片左下角
        var t2 = new THREE.Vector2(1, 0.25); //图片右下角
        var t3 = new THREE.Vector2(1, 1); //图片右上角
        var t0 = new THREE.Vector2(0, 1); //图片左上角
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.rotation.x = -Math.PI / 2;
        mesh1.position.set(x, 50, z);
        var geometry = new THREE.PlaneGeometry(110, 16, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0);
        var t2 = new THREE.Vector2(1, 0);
        var t3 = new THREE.Vector2(1, 0.25);
        var t0 = new THREE.Vector2(0, 0.25);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.position.set(x, 42, z + 55);
        var geometry = new THREE.PlaneGeometry(110, 16, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0);
        var t2 = new THREE.Vector2(1, 0);
        var t3 = new THREE.Vector2(1, 0.25);
        var t0 = new THREE.Vector2(0, 0.25);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var materialRight = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh3 = new THREE.Mesh(geometry, material);
        mesh3.receiveShadow = true;
        mesh3.rotation.y = Math.PI / 2;
        mesh3.position.set(x + 55, 42, z);
        Shadow = makeShadow(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube27(x, z) {
        var geometry = new THREE.CubeGeometry(110, 12, 90);
        var texture = new THREE.TextureLoader().load("source/stool.png");
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 44, z);

        var geometry = new THREE.CubeGeometry(14, 48, 14);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x - 34, 18, z + 34);
        mesh1.rotation.x = -Math.PI / 20;
        mesh1.rotation.z = -Math.PI / 40;
        mesh2 = mesh1.clone();
        mesh2.position.set(x + 34, 18, z + 34);
        mesh2.rotation.z = Math.PI / 40;
        mesh3 = mesh1.clone();
        mesh3.position.set(x - 34, 18, z - 34);
        mesh3.rotation.x = Math.PI / 20;
        mesh4 = mesh1.clone();
        mesh4.position.set(x + 34, 18, z - 34);
        mesh4.rotation.x = Math.PI / 20;
        mesh4.rotation.z = Math.PI / 40;

        Shadow = makeShadow_stool(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, mesh3, mesh4, Shadow);
        scene.add(group);
        return group;
    }

    function creatcube07(x, z) {
        var geometry = new THREE.CubeGeometry(120, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0x8e8e8e
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        var geometry = new THREE.PlaneGeometry(100, 120);
        var texture = new THREE.TextureLoader().load("source/disk.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        var mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 50.01, z);
        mesh1.rotation.x = -Math.PI / 2;
        mesh1.rotation.z = Math.PI / 2;

        Shadow = makeShadow2(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, Shadow);
        scene.add(group);
        return group;
    }

    function creatdesk(x, z) {
        var geometry = new THREE.CylinderGeometry(50, 50, 6, 30);
        var material = new THREE.MeshLambertMaterial({
            color: 0xafafaf
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 47, z);
        var geometry = new THREE.CylinderGeometry(10, 30, 49, 30);
        var material = new THREE.MeshLambertMaterial({
            color: 0x686868
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 25, z);
        Shadow = makeShadow_desk(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, Shadow);
        scene.add(group);
        return group;
    }

    function creatdesk2(x, z) {
        var geometry = new THREE.CylinderGeometry(50, 50, 6, 30);
        var material = new THREE.MeshLambertMaterial({
            color: 0x686868
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 47, z);
        var geometry = new THREE.CylinderGeometry(10, 30, 49, 30);
        var material = new THREE.MeshLambertMaterial({
            color: 0x979797
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 25, z);
        Shadow = makeShadow_desk(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, Shadow);
        scene.add(group);
        return group;
    }

    function creatcylinder(x, z) {
        group = creatcylinder_canvas(x, z, "#ffffff", "#979797", 0xffffff, 0x979797);
        return group;
    }

    function creatcylinder2(x, z) {
        group = creatcylinder_canvas(x, z, "#649569", "#7bc487", 0x649569, 0xffffff);
        return group;
    }

    function creatcup(x, z) {
        var geometry = new THREE.CylinderGeometry(30, 36, 10, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({
            color: 0x464646
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 45, z);
        var geometry = new THREE.CircleGeometry(30, 30);
        var texture = new THREE.TextureLoader().load("source/westore_desk.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        // texture.needsUpdate = true;
        var mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 50, z);
        mesh1.rotation.x = -Math.PI / 2;
        mesh1.rotation.z = Math.PI / 4;
        var geometry = new THREE.CylinderGeometry(32, 20, 40, 30, 3, true);
        var texture = new THREE.TextureLoader().load("source/westore.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        texture.needsUpdate = true;
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.position.set(x, 20, z);
        mesh2.rotation.y = -3 * Math.PI / 4;
        Shadow = makeShadow_cup(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, Shadow);
        scene.add(group);
        return group;
    }

    function topPlane_color(x, z, topcolor) {
        var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            color: topcolor
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.rotation.x = -Math.PI / 2;
        mesh.position.set(x, 50, z);
        return mesh;
    }

    function makeShadow(x, z) {
        var geometry = new THREE.PlaneGeometry(116, 160, 1, 1);
        var texture = new THREE.TextureLoader().load("source/shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 30, 0, z + 6);
        return meshShadow;
    }

    function makeShadow2(x, z) {
        var geometry = new THREE.PlaneGeometry(112, 180, 1, 1);
        var texture = new THREE.TextureLoader().load("source/shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 30, 0, z + 8);
        return meshShadow;
    }

    function makeShadow_cylinder(x, z) {
        var geometry = new THREE.PlaneGeometry(90, 130, 1, 1);
        var texture = new THREE.TextureLoader().load("source/cylinder_shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 30, 0, z + 8);
        return meshShadow;
    }

    function makeShadow_cup(x, z) {
        var geometry = new THREE.PlaneGeometry(50, 80, 1, 1);
        var texture = new THREE.TextureLoader().load("source/cylinder_shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 30, 0, z + 8);
        return meshShadow;
    }

    function makeShadow_desk(x, z) {
        var geometry = new THREE.PlaneGeometry(90, 140, 1, 1);
        var texture = new THREE.TextureLoader().load("source/desk_shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 45, 0, z + 5);
        return meshShadow;
    }

    function makeShadow_stool(x, z) {
        var geometry = new THREE.PlaneGeometry(100, 130, 1, 1);
        var texture = new THREE.TextureLoader().load("source/stool_shadow.png");
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        material.transparent = true;
        meshShadow = new THREE.Mesh(geometry, material);
        meshShadow.rotation.x = -Math.PI / 2;
        meshShadow.rotation.z = Math.PI / 2;
        meshShadow.position.set(x - 36, 0, z + 4);
        return meshShadow;
    }

    function canvasOneFace(x, z, texture, color) {
        var geometry = new THREE.CubeGeometry(100, 50, 100);
        var material = new THREE.MeshLambertMaterial({
            color: color
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 25, z);
        var geometry = new THREE.PlaneGeometry(100, 50);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        texture.needsUpdate = true;
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.rotation.y = Math.PI / 2;
        mesh1.position.set(x + 50.01, 25, z);
        Shadow = makeShadow();
        Shadow.position.set(x - 30, 0, z + 8);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, Shadow);
        scene.add(group);
        return group;
    }

    function canvasTwoFace(x, z, texture, topColor) {
        var mesh = topPlane_color(x, z, topColor);
        var geometry = new THREE.PlaneGeometry(100, 50, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        texture.needsUpdate = true;
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 25, z + 50);
        var mesh2 = mesh1.clone();
        mesh2.rotation.y = Math.PI / 2;
        mesh2.position.set(x + 50, 25, z);
        Shadow = makeShadow();
        Shadow.position.set(x - 30, 0, z + 8);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, Shadow);
        scene.add(group);
        return group;
    }

    function canvasTwoFace_circle(x, z, colorTop, colorTop2, color) {
        var mesh = topPlane_color(x, z, colorTop);
        var geometry = new THREE.PlaneGeometry(100, 50, 1, 1);
        var canvas = document.createElement('canvas');
        canvas.width = 100;
        canvas.height = 50;
        var ctx = canvas.getContext('2d');
        ctx.rect(0, 0, 100, 50);
        ctx.fillStyle = colorTop2;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(50, 25, 20, 0, 2 * Math.PI);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(50, 25, 10, 0, 2 * Math.PI);
        ctx.fillStyle = colorTop2;
        ctx.fill();
        var texture = new THREE.Texture(canvas);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        texture.needsUpdate = true;
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 25, z + 50);
        var mesh2 = mesh1.clone();
        mesh2.rotation.y = Math.PI / 2;
        mesh2.position.set(x + 50, 25, z);
        Shadow = makeShadow();
        Shadow.position.set(x - 30, 0, z + 8);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, Shadow);
        scene.add(group);
        return group;
    }

    function canvasTwoFace_5stripe(x, z, colorTop, colorTop2, color) {
        var canvas = document.createElement('canvas');
        canvas.width = 100;
        canvas.height = 50;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = colorTop2;
        ctx.fillRect(0, 0, 100, 10);
        ctx.fillStyle = color;
        ctx.fillRect(0, 10, 100, 10);
        ctx.fillStyle = colorTop2;
        ctx.fillRect(0, 20, 100, 10);
        ctx.fillStyle = color;
        ctx.fillRect(0, 30, 100, 10);
        ctx.fillStyle = colorTop2;
        ctx.fillRect(0, 40, 100, 10);
        var texture = new THREE.Texture(canvas);
        group = canvasTwoFace(x, z, texture, colorTop);
        return group;
    }

    function canvasTwoFace_3stripe(x, z, colorTop, colorTop2, color) {
        var canvas = document.createElement('canvas');
        canvas.width = 100;
        canvas.height = 50;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = colorTop2;
        ctx.fillRect(0, 0, 100, 10);
        ctx.fillStyle = color;
        ctx.fillRect(0, 10, 100, 30);
        ctx.fillStyle = colorTop2;
        ctx.fillRect(0, 40, 100, 10);
        var texture = new THREE.Texture(canvas);
        group = canvasTwoFace(x, z, texture, colorTop);
        return group;
    }

    function creatcylinder_canvas(x, z, colorTop, colorTop2, color, color2) {
        var geometry = new THREE.CylinderGeometry(40, 40, 44, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({
            color: color2
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.position.set(x, 22, z);
        var geometry = new THREE.CylinderGeometry(40, 40, 6, 30, 3, true);
        var material = new THREE.MeshLambertMaterial({
            color: color
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, 47, z);
        var geometry = new THREE.CircleGeometry(40, 30);
        var canvas = document.createElement('canvas');
        canvas.width = 80;
        canvas.height = 80;
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(40, 40, 42, 0, 2 * Math.PI);
        ctx.fillStyle = colorTop;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(42, 42, 30, 0, 2 * Math.PI);
        ctx.fillStyle = colorTop2;
        ctx.fill();
        ctx.beginPath();
        ctx.arc(42, 42, 20, 0, 2 * Math.PI);
        ctx.fillStyle = colorTop;
        ctx.fill();
        var texture = new THREE.Texture(canvas);
        var material = new THREE.MeshBasicMaterial({
            map: texture
        });
        texture.needsUpdate = true;
        var mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.position.set(x, 50, z);
        mesh2.rotation.x = -Math.PI / 2;
        Shadow = makeShadow_cylinder(x, z);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, Shadow);
        scene.add(group);
        return group;
    }

    function allPicThreeFace(x, z, picture, h) {
        var texture = new THREE.TextureLoader().load(picture);
        var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0.34);
        var t2 = new THREE.Vector2(0.66, 0.34);
        var t3 = new THREE.Vector2(0.66, 1);
        var t0 = new THREE.Vector2(0, 1);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.receiveShadow = true;
        mesh.rotation.x = -Math.PI / 2;
        mesh.position.set(x, h, z);
        var geometry = new THREE.PlaneGeometry(100, h, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(0, 0);
        var t2 = new THREE.Vector2(0.65, 0);
        var t3 = new THREE.Vector2(0.65, 0.333);
        var t0 = new THREE.Vector2(0, 0.333);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh1 = new THREE.Mesh(geometry, material);
        mesh1.receiveShadow = true;
        mesh1.position.set(x, h / 2, z + 50);
        var geometry = new THREE.PlaneGeometry(100, h, 1, 1);
        geometry.faceVertexUvs[0] = [];
        var t1 = new THREE.Vector2(1, 0.36);
        var t2 = new THREE.Vector2(1, 1);
        var t3 = new THREE.Vector2(0.666, 1);
        var t0 = new THREE.Vector2(0.666, 0.36);
        geometry.faceVertexUvs[0].push([t0, t1, t3], [t1, t2, t3]);
        var material = new THREE.MeshLambertMaterial({
            map: texture
        });
        mesh2 = new THREE.Mesh(geometry, material);
        mesh2.receiveShadow = true;
        mesh2.rotation.y = Math.PI / 2;
        mesh2.position.set(x + 50, h / 2, z);
        Shadow = makeShadow();
        Shadow.position.set(x - 30, 0, z + 8);
        group = new THREE.Object3D();
        group.add(mesh, mesh1, mesh2, Shadow);
        scene.add(group);
        return group;
    }

    function deleteGroup(group) {
        var children = group.children;
        for (var i = 0; i < children.length; i++) {
            if (children[i] instanceof THREE.Mesh) {
                children[i].geometry.dispose();
                children[i].material.dispose();
            } else {
                children[i].traverse(function(item) {
                    if (item instanceof THREE.Mesh) {
                        item.geometry.dispose();
                        item.material.dispose();
                    }
                });
            }
        }
        scene.remove(group);
    }

    function onWindowResize() {
        width = document.getElementById('canvas-frame').clientWidth;
        // height = document.getElementById('canvas-frame').clientHeight;
        camera.left = width / -2;
        camera.right = width / 2
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
    }

    function animate() {
        requestAnimationFrame(animate);
<!--        stats.update();-->
        TWEEN.update();
        // controls.update();
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }

    function replay() {
        location.reload();
    }
</script>

<body onload="threeStart();">
    <div id="canvas-frame"></div>
    <div id="point"> 0 </div>
    <div id="gameOver">
        <p style="font-size:20px; margin-top:100px;font-weight: 200; ">本次得分</p>
        <p style="font-size:80px; margin-top:20px; font-family: numjump;" id="pointtotal">0</p>
        <img style="margin-top:80px;width:250px;height:100px;" src="source/replay.png" onclick="replay();">
    </div>
    <div style="display:flex;align-items: center;">
        <div id="chart" style="width: 1800px;height:400px;"></div>
        <div id="qrcode"></div>
    </div>

    </div>

</body>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    //波形图
    var chart = echarts.init(document.getElementById('chart'));
    var option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            show: false,
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            max: 3000,
            min: 1500,
        },
        series: [{
            type: 'line',
            data: [],
            smooth: true,
            symbol: 'none'
        }]
    };
    chart.setOption(option);
    var count
    var data = [];
    for (var i = 0; i < 300; i++) {
        data.push(2000);
    }
    console.log(data)
    addData()

    function addData(newData) {
        var list = []
        data.push(newData);

        if (data.length > 100) {
            data.shift();
        }
        data.forEach((e, index) => {
            count++
            list.push(count)
        })
        chart.setOption({
            xAxis: {
                data: list.slice(list.length - 100)
            },
            series: [{
                data: data.slice(data.length - 100)
            }]
        });
    }
    // 获取要生成二维码的 DOM 元素
    var qrcodeDiv = document.getElementById('qrcode');
    var phoneNum = localStorage.getItem("phoneNum")
    if (phoneNum == undefined) {
        phoneNum = '1'
    } else {
        renderPhoneNum()
    }
    var ws2

    webSocketInit()

    function webSocketInit() {
        ws2 = new WebSocket("ws://www.brainseek.cn:8000/login/");

        ws2.addEventListener("open", () => {
            console.log("WebSocket连接成功");
        })
        ws2.addEventListener("error", function(event) {
            console.error("WebSocket 出错");
        });
        ws2.addEventListener('message', (event) => {
            console.log(event)
            var json = JSON.parse(event.data)
            if (json.data.uid) {
                if (phoneNum != "1")
                    qrcodeDiv.innerHTML = '<div>扫码绑定<br/>' + phoneNum + '</div>'
                createQrCode(json.data.uid)
            } else {
                webSocketInit()
                phoneNum = json.data.phoneNum
                localStorage.setItem('phoneNum', phoneNum)
                renderPhoneNum()
            }
        })
    }

    function renderPhoneNum() {
        qrcodeDiv.innerHTML = '<div>扫码绑定' + phoneNum + '</div>'
    }

    function logout() {
        localStorage.clear()
        location.href = ""
    }

    function createQrCode(text) {
        var qrcode = new QRCode(qrcodeDiv, {
            text: text,
            width: 85,
            height: 85,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H // 纠错级别
        });
    }

    function uploadGameScore() {
        var json = {
            "phonenum": phoneNum,
            "time": gameDuration.toFixed(0),
            "gamescore": point + ""
        }
        axios.post("http://www.brainseek.cn:8000/train/inputGameScore", json)
    }
</script>
<style>
    #qrcode {
        position: fixed;
        bottom: 10px;
        right: 10px;
        min-width: 85px;
        min-height: 85px;
        text-align: center;
    }
</style>

</html>